<template>
  <div class="container flex-column h-100P w-100P">
    <div class="flex-row justify-between">
      <div class="mg-bottom-20 flex-row ">
        <custom-button @click="isNewModelVisible = true"></custom-button>
        <custom-button
          @click="handleInitCopyDialog"
          title="复制"
          class="mg-left-10"
        ></custom-button>
      </div>
      <el-input
        v-model="page.keyword"
        class="input-width"
        placeholder="请输入物模型名称或ID"
        @change="getModelData"
        suffix-icon="el-icon-search"
      ></el-input>
    </div>
    <div class="flex-sub">
      <div class="card-container flex-warp">
        <ModelCard
          v-for="(data, i) in modelsData"
          :key="i"
          :model-data="data"
          :color-number="i"
          class="card"
          @delClick="handleDelModel"
        />
      </div>
    </div>
    <el-pagination
      background
      layout="prev, pager, next, total, jumper"
      :total="page.total"
      :page-size="page.pageSize"
      hide-on-single-page
      @current-change="handleCurrentChange"
    />
    <el-dialog
      title="新建物模型"
      :close-on-click-modal="false"
      :visible.sync="isNewModelVisible"
      :before-close="handleCancelAdd"
      :width="handleScreenWidthToVw(574)+'px'"
    >
      <el-form
        ref="AddModelForm"
        :model="modelForm"
        :rules="Rules"
        :label-width="handleScreenWidthToVw(140)+'px'"
      >
        <el-form-item label="物模型名称：" prop="name">
          <el-input v-model="modelForm.name" class="form-input" placeholder="请输入物模型名称" />
        </el-form-item>
        <el-form-item label="标识符：" prop="identifier">
          <el-input v-model="modelForm.identifier" class="form-input" placeholder="请输入标识符" />
        </el-form-item>
        <el-form-item label="所属品类：" prop="categoryEnum">
          <el-select v-model="modelForm.categoryEnum" placeholder="请选择所属品类">
            <el-option
              v-for="item in categoryList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注说明：">
          <el-input v-model="modelForm.remark" class="form-input" />
        </el-form-item>
      </el-form>

      <template slot="footer" class="dialog-footer">
        <SubButton title="提交" @subClick="handleAddModel" />
        <CancelButton @cancelClick="handleCancelAdd" />
      </template>
    </el-dialog>

    <el-dialog
      title="复制物模型"
      :close-on-click-modal="false"
      :visible.sync="isCopyModelVisible"
      :width="handleScreenWidthToVw(574)+'px'"
    >
      <div class="copy-dialog-warning flex-row">
        <i class="el-icon-warning mg-right-10 mg-top-4" />
        <div>提交后将为新的物模型赋予与当前已选物模型相同的说明、属性和服务字段。</div>
      </div>
      <el-form
        ref="copyForm"
        :model="modelForm"
        :rules="Rules"
        :label-width="handleScreenWidthToVw(140)+'px'"
      >
        <el-form-item label="选择物模型：" prop="metadataId">
          <el-select
            ref="copyModelSelect"
            v-model="modelForm.metadataId"
            placeholder="请选择物模型"
            @change="handleAddName"
          >
            <el-option
              v-for="model in allModels"
              :key="model.id"
              :label="model.name"
              :value="model.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="物模型名称：" prop="name">
          <el-input v-model="modelForm.name" class="form-input" />
        </el-form-item>
      </el-form>

      <template slot="footer" class="dialog-footer">
        <SubButton title="提交" @subClick="handleCopyModel" />
        <CancelButton @cancelClick="handleCancelCopy" />
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getThingModelList, addModel, delModel, findAllMetaList, copyModel } from './api'
import ModelCard from './components/model-card'
import SubButton from '@/components/sub-button/index.vue'
import CancelButton from '@/components/cancel-button/index.vue'
import { handleScreenWidthToVw } from '@/utils/tools'

export default {
  components: { ModelCard, CancelButton, SubButton },
  data() {
    return {
      isNewModelVisible: false,
      isCopyModelVisible: false,
      keyWord: '',
      modelForm: { name: '', remark: '', metadataId: '', identifier: '', categoryEnum: '' },
      modelsData: [],
      allModels: [],
      page: {
        pageNo: 1,
        pageSize: 12,
        total: null,
        keyword: '',
      },
      categoryList: [],
    }
  },
  computed: {
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
    Rules() {
      return {
        name: [
          {
            required: true,
            message: '物模型名称不能为空',
            trigger: ['blur', 'change'],
          },
        ],

        categoryEnum: [{ required: true, message: '请选择所属类别', trigger: ['blur', 'change'] }],
        identifier: [{ required: true, message: '请输入标识符', trigger: ['blur', 'change'] }],
        metadataId: [
          {
            required: true,
            message: '请选择物模型',
            trigger: 'change',
          },
        ],
      }
    },
  },
  async created() {
    this.getModelData()
    this.categoryList = await this.$systemEnum.getEnumByName(this.$CONST_ENUMS.MetadataCategoryEnum)
  },
  methods: {
    // 取消新建
    handleCancelAdd() {
      this.isNewModelVisible = false
      this.$refs['AddModelForm'].resetFields()
    },
    // 取消复制
    handleCancelCopy() {
      this.isCopyModelVisible = false
      this.$refs['copyForm'].resetFields()
    },
    // 复制物模型添加姓名
    handleAddName() {
      this.$nextTick(() => {
        this.modelForm.name = this.$refs.copyModelSelect.selected.label + '_copy'
      })
    },
    // 复制物模型
    async handleCopyModel() {
      await this.$refs['copyForm'].validate()
      const copyData = {
        metadataName: this.modelForm.name,
        metadataId: this.modelForm.metadataId,
      }
      await copyModel(copyData)
      await this.getModelData()
      this.$message({
        type: 'success',
        message: '复制成功!',
      })
      this.isCopyModelVisible = false
      this.$refs.copyForm.resetFields()
    },
    // 初始化复制物模型页面
    async handleInitCopyDialog() {
      const Res = await findAllMetaList()
      this.allModels = Res
      this.isCopyModelVisible = true
    },
    // 切换页面
    handleCurrentChange(val) {
      this.page.pageNo = val
      this.getModelData()
    },
    // 分页获取物模型设计
    async getModelData() {
      const { records, total } = await getThingModelList(this.page)
      this.modelsData = records
      this.page.total = total
    },
    // 点击删除按钮
    async handleDelModel(ModelId) {
      await delModel(ModelId)
      if (this.modelsData.length === 1 && this.page.pageNo !== 1) {
        this.page.pageNo = this.page.pageNo - 1
      }
      await this.getModelData()
      this.$message({
        type: 'success',
        message: '删除成功!',
      })
    },
    // 点击添加按钮
    async handleAddModel() {
      await this.$refs['AddModelForm'].validate()
      this.isNewModelVisible = false
      await addModel(this.modelForm)
      this.$message({
        type: 'success',
        message: '新增成功!',
      })
      await this.getModelData()
      this.$refs.AddModelForm.resetFields()
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: vh(20px) vw(20px);
}

.copy-dialog-warning {
  width: 100%;
  margin: 0 vw(103px) vh(20px) vw(113px);
  font-size: vw(14px);
  line-height: vh(20px);
  color: #d12d1f;
}

.input-width {
  width: vw(250px);
}

.card-container {
  margin-right: vw(-20px);
  .card {
    width: calc(25% - #{vw(20px)});
    margin: 0 vw(20px) vw(20px) 0;
  }
}
::v-deep {
  .el-dialog__footer {
    padding: vh(10px) vw(20px) vh(20px);
    text-align: center;
  }

  .el-dialog__body {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .el-dialog__title {
    font-size: vw(18px);
  }

  .el-pagination {
    margin-top: 0;
  }

  .el-form-item {
    margin-bottom: vh(22px);
  }

  .el-form-item__label {
    font-size: vw(14px);
    line-height: vh(40px);
  }

  .el-form-item__content {
    font-size: vw(14px);
    line-height: vh(40px);
  }

  .el-radio__label {
    font-size: vw(14px);
  }
}
</style>
